define([
    'jQuery',
    'Underscore',
    'Backbone',
    'Kendo',
    'i18n!nls/language',
    'models/crown',
    'datasources/crown'
], function($, _, Backbone, Kendo, i18n, Crown, crownDatasource) {

    
    
    var crownTabView = kendo.observable({
    
        
        
        createOverviewTable: function() {
            
            // create the grind containing the update elements
            $("#crown_grid").kendoGrid({
                dataSource: crownDatasource,
                columns: [{
                        field: "id",
                        title: "id",
                        width: 80,
                    }, { 
                        field: "name",
                        title: "naam", 
                    }, {
                        field: "value",
                        title: "weging",
                        width: 100,
                    }, { 
                        field: "active",
                        title: "actief", 
                        width: 100,
                    }],
                toolbar: [{ 
                        name: "create",
                        text: "voeg nieuwe rij toe",
                    }, {
                        name: "save",
                        text: "opslaan",
                    }, { 
                        name : "cancel",
                        text: "annuleren",
                    }],
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    messages: i18n.grid.message
                },
                sortable: {
                    mode: "multiple",
                    allowUnsort: true
                },
                editable: true,
//                save: function(e) {
//                    alert('save');
//                    return;
//                },
//                saveChanges: function(e) {
//                    alert('saveChanges');
//                    this.refresh();
//                    return;
//                },
//                dataBound: function(e) {
//                    alert('dataBound');
//                    return;
//                },
            });
            
        },
        

        
        renderSubviews: function() {
            
            this.createOverviewTable();
            
        },
        
        
        
        // self executing function acts like a constructor (hence the name)
        __construct: (function(self, window, undefined) {
            
            // do nothing right now...
// console.log('crownTabView initialized!');
            
        })(this, window)
        

    
    });
    
    
    
    
//    var crownTabView = Backbone.View.extend({
//    
//
//        // main page element
//        el: $("#crown_tab"),
//        
//        
//        
//        initialize: function() {
//        
//            // render my own view
//            this.render();
//        
//        },
//        
//
//
//        render: function() {
//
//            // render the main template to the main element
//            this.$el.html(crownOverviewTemplate);
//
//            // create the grind containing the update elements
//            $("#crown_grid").kendoGrid({
//                dataSource: crownDatasource,
//                columns: [{
//                        field: "id",
//                        title: "id",
//                        width: 80,
//                    }, { 
//                        field: "name",
//                        title: "naam", 
//                    }, {
//                        field: "value",
//                        title: "weging",
//                        width: 100,
//                    }, { 
//                        field: "active",
//                        title: "actief", 
//                        width: 100,
//                    }],
//                toolbar: [{ 
//                        name: "create",
//                        text: "voeg nieuwe rij toe",
//                    }, {
//                        name: "save",
//                        text: "opslaan",
//                    }, { 
//                        name : "cancel",
//                        text: "annuleren",
//                    }],
//                sortable: true,
//                pageable: {
//                    refresh: true,
//                    pageSizes: true,
//                    messages: i18n.grid.message
//                },
//                sortable: {
//                    mode: "multiple",
//                    allowUnsort: true
//                },
//                editable: true,
////                save: function(e) {
////                    alert('save');
////                    return;
////                },
////                saveChanges: function(e) {
////                    alert('saveChanges');
////                    this.refresh();
////                    return;
////                },
////                dataBound: function(e) {
////                    alert('dataBound');
////                    return;
////                },
//            });
//
//        
//        } // render: function()
//        
//
//    
//    });
    
    
    
    return crownTabView;
    
    
    
});